<template>
  <view class="content-a">
    <image
      class="bg"
      src="@/static/answers/ad.png"
      style="height: 100%;"
    ></image>

    <view class="logo-image">
        <image
        class="edge-ad1"
        src="@/static/answers/edge-ad1.png"
        mode="widthFix"
      ></image>

      <image
        class="edge-ad2"
        src="@/static/answers/edge-ad2.png"
        mode="widthFix"
      ></image>
      <image
        class="core-ad"
        src="@/static/answers/core-ad.png"
        mode="widthFix"
      ></image>
    </view>


    <input :style="{ 'background-image': 'url(' + EnumBG.BU9 + ')' }" v-model="showContent"  class="show-content"/>

    <!-- <input  placeholder-style="color:#fff" placeholder="请输入你的问题" v-model="userInput"  class="input" /> -->
    <view class="run"  :class=" sizeStatus ? 'commit-big':'commit-samll'"  :style="{ 'background-image': 'url(' + EnumBG.BU8 + ')' }" @click="run()">立即揭晓</view>
    <view class="dailog" v-if="isShow">
      <view class="close" @click="isShow = false">x</view>
      {{ text }}
    </view>
    <!-- <fui-loading v-if="loadingShow" type="col" isFixed></fui-loading> -->
    <Bullet v-model:showContent="showContent" />
  </view>
  <LandscapeModel v-model:show="show"  :sonFun="sonFun"/>
</template>

<script setup lang="ts">
import { filtion,getAnswer } from "@/utils/ab";
import { EnumBG } from "@/utils/content";
import Bullet from "./Bullet.vue";
import { EnumAnswers } from "../content";
import LandscapeModel from "@/components/Landscape/LandscapeModel.vue";
import dyUserPlayingService from "@/api/dyUserPlayingService";
const showContent = ref("")
const sizeStatus = ref(false)
const show = ref(false)
const emit = defineEmits(['update:answersStatus','update:answers'])
const text = ref('')
const isShow = ref(false)
const loadingShow = ref(false)
const run =async ()=>{
  // if(!userInput.value){
  //   uni.showToast({
	//   title: '请输入你的问题',
  //   duration: 2000,
  //   icon:"none"
  // }); 
  //   return
  // }
  uni.showLoading({
        title: "加载中",
        icon: "none",
  });
  const {result}  = await dyUserPlayingService.sensitiveWord({word:showContent.value})
  if(result){
    uni.hideLoading()
    uni.showToast({
        title: '存在敏感词,请重新填写',
        duration: 2000,
        icon:"none"
    });
    return
  }
  uni.hideLoading()
  loadingShow.value = true
  show.value = true

}
const sonFun = async()=>{
  loadingShow.value = false
  const text = await getAnswer()
  emit('update:answersStatus',EnumAnswers.RESULT)
  emit('update:answers',text)
}
const startTimer = () => {
setInterval(() => {
  sizeStatus.value = !sizeStatus.value
}, 1000); // 每秒执行一次
};


onMounted(() => {
startTimer();
});
</script>

<style lang="scss" scoped>
.dailog {
  position: absolute;
  z-index: 99;
  top: 50%;
  left: 50%;
  transform: translate(-50%);
  width: 93%;
  height: 300rpx;
  background-color: black;
  color: #f8f8f8;
  font-weight: bolder;
  font-size: 60rpx;
  line-height: 300rpx;
  text-align: center;
}
.close {
  position: absolute;
  z-index: 99;
  top: -16rpx;
  right: -16rpx;
  display: block;
  border-radius: 50%;
  background-color: #f8f8f8;
  width: 50rpx;
  height: 50rpx;
  color: black;
  font-size: 20rpx;
  text-align: center;
  line-height: 20px;
}
.bg {
  width: 100%;
}
.show-content{
  position: absolute;
    width: 500rpx;
    height: 150rpx;
    top: 39%;
    left: 51.5%;
    transform: translateX(-50%);
    line-height:  150rpx;
    text-align: center;
    background-size: 100% 100%;
    color: white;
}

.core-ad{
      position: absolute;
      z-index: 106;
   
      width: 120rpx;
    }

.logo-image {
    z-index: 101;
    position: absolute;
    width: 80%;
    height: 30%;
    top: 50%;
    left: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
    .edge-ad1{
    position: absolute;
    z-index: 103;
    width: 500rpx;
  }
  .edge-ad2{
    position: absolute;
    z-index: 104;
    width: 500rpx;
    animation: rotate360 4s linear infinite;
  }
  }
@keyframes rotate360 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.run {
  position: absolute;
  width: 300rpx;
  height: 81rpx;
  top: 88%;
  left: 51.5%;
  font-weight: bolder;
  transform: translateX(-50%);
  line-height:  81rpx;
  text-align: center;
  z-index: 100;
  background-size: 100% 100%;
  color: white;
  padding-bottom: 10rpx;
}
.commit-big{

  width: 320rpx;
  height: 101rpx;
  line-height:  101rpx;
  left: 51%;
transition: all 1s;
}
.commit-samll{
  width: 300rpx;
  height: 81rpx;
  left: 51.5%;
  transition: all 1s;

}
.content-a {
  width: 100%;
  height: 100%;
  .input{
    position: absolute;
    width: 500rpx;
    height: 81rpx;
    top: 43%;
    left: 16%;
    text-align: center;
  }
}
</style>
